{layout name="layout" /}
<!--引入Echart-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>

<div class="layui-bg-gray">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">Echarts使用Demo(静态数据)</div>
                <div class="layui-card-body">
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">Echarts使用Demo(动态数据)</div>
                <div class="layui-card-body">
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main2" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-bg-gray">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">Echarts使用Demo(静态数据)</div>
                <div class="layui-card-body">
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main3" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--Echart脚本-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: '总销售额'},
                    {value: 735, name: '退款金额'},
                    {value: 580, name: '未消费'},
                    {value: 484, name: '未提现'},
                    {value: 300, name: '已提现'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

<script>
    var myChart2 = echarts.init(document.getElementById('main2'));
    option = {
        title: {
            text: '本周后台请求'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {},
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {$adminLogDate|raw}
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}次'
            }
        },
        series: [
            {
                name: '最高',
                type: 'line',
                data: {$adminLogCount|raw},
                markPoint: {
                    data: [
                        { type: 'max', name: '最高点' },
                        { type: 'min', name: '最低点' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            }
        ]
    };
    myChart2.setOption(option);
</script>

<script>
    var myChart3 = echarts.init(document.getElementById('main3'));
    option = {
        title: {
            text: '本周接口请求'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {},
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {$apiLogDate|raw}
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}次'
            }
        },
        series: [
            {
                name: '最高',
                type: 'line',
                data: {$apiLogCount|raw},
            markPoint: {
        data: [
            { type: 'max', name: '最高点' },
            { type: 'min', name: '最低点' }
        ]
    },
    markLine: {
        data: [{ type: 'average', name: 'Avg' }]
    }
    }
    ]
    };
    myChart3.setOption(option);
</script>
